<template>
  <div class="d-layout-body product-tree">
    <slot name="layout-side">
      <div v-if="list && list.length > 0" class="d-layout-side">
        <list-menu :data="list" :class-name="sideMenuClass" @onClickItem="handleClickItem" />
      </div>
    </slot>
    <slot name="layout-content">
      <div class="d-layout-content">
        <slot name="contenter">
          <div class="d-contenter">
            <router-view :key="$route.fullPath" />
          </div>
        </slot>
      </div>
    </slot>
  </div>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages.js'
import { Grid, GridColumn, FormCalendar, Pager, ListMenu } from '@daelui/vdog/dist/components.js'
import { RefreshIcon, EditIcon, DeleteIcon, TreeIcon } from '@daelui/vdog/dist/icons.js'
import proSer from '../../service/action/product.action.js'
import { getter } from '../../service/stock/index.js'
import { treer } from '@daelui/dogjs/dist/components.js'

export default {
  components: {
    PanerGrid,
    Grid,
    GridColumn,
    RefreshIcon,
    EditIcon,
    DeleteIcon,
    TreeIcon,
    FormCalendar,
    Pager,
    ListMenu
  },

  data () {
    return {
      // 搜索条件
      search: {
        name: '',
        labels: '',
        description: '',
        createTime: '',
        updateTime: ''
      },
      productId: '',
      // 左菜单列表
      list: [],
      sideMenuClass: '',
      // 状态
      statusList: getter.statusList(),
      // 产品列表
      productList: []
    }
  },

  methods: {
    /**
     * @function 初始化视图
    */
    initView () {
      let params = this.$route.params
      // 新建
      if (!params.productId) {
        this.$router.push(this.getMicroRoute('/product/list'))
      } else {
        this.productId = params.productId
        this.loadItem(params.productId)
      }
    },
    /**
     * @function 加载产品数据
    */
    loadItem (productId) {
      proSer.queryNodeTree({ id: productId }).then(res => {
        let list = res.data.list
        list = Array.isArray(list) ? list : []
        treer.forEach({ data: list, callback: function (item) {
          item.text = item.name
        }})
        this.list = list
      })
    },
    handleClickItem (item) {
      // 产品
      let path = `/product/tree/${this.productId}/view/${item.id}`
      if (!item.hasOwnProperty('productId') && !item.hasOwnProperty('pageId')) {
        this.$router.push(this.getMicroRoute(path))
        return true
      }
      // 页面
      path = `/product/tree/${this.productId}/page/${item.id}`
      // 功能
      if (item.pageId) {
        path = `/product/tree/${this.productId}/func/${item.id}`
      }
      this.$router.push(this.getMicroRoute(path))
    }
  },

  mounted () {
    this.initView()
  }
}
</script>

<style scoped>
.d-form-label {
  width: 80px;
}
</style>

<style lang="less">
.product-tree {
  .d-layout-side {
    margin-right: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    & + .d-layout-content {
      & > .d-contenter {
        padding: 0;
      }
    }
  }
}
</style>
